<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
<meta charset="utf-8">
<title>线路列表</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="" name="description">
<meta content="" name="author">
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css">
<link href="../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="../assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css">
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN PAGE LEVEL PLUGIN STYLES -->
<link href="../assets/global/plugins/jqvmap/jqvmap/jqvmap.css" rel="stylesheet" type="text/css">
<link href="../assets/global/plugins/morris/morris.css" rel="stylesheet" type="text/css">
<!-- END PAGE LEVEL PLUGIN STYLES -->
<!-- BEGIN PAGE STYLES -->
<link href="../assets/admin/pages/css/tasks.css" rel="stylesheet" type="text/css"/>
<!-- END PAGE STYLES -->
<!-- BEGIN THEME STYLES -->
<!-- DOC: To use 'rounded corners' style just load 'components-rounded.css' stylesheet instead of 'components.css' in the below style tag -->
<link href="../assets/global/css/components-rounded.css" id="style_components" rel="stylesheet" type="text/css">
<link href="../assets/global/css/plugins.css" rel="stylesheet" type="text/css">
<link href="../assets/admin/layout3/css/layout.css" rel="stylesheet" type="text/css">
<link href="../assets/admin/layout3/css/themes/default.css" rel="stylesheet" type="text/css" id="style_color">
<link href="../assets/admin/layout3/css/custom.css" rel="stylesheet" type="text/css">
<!-- END THEME STYLES -->
<link rel="shortcut icon" href="logo.png">
<style>
	[v-cloak]{
		display: none;
	}
</style>
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body>

<div id="app">
	<!-- BEGIN PAGE CONTAINER -->
	<div class="page-container" v-cloak>
		<!-- BEGIN PAGE CONTENT -->
		<div class="page-content">
			<div class="container">
				<!-- BEGIN PAGE CONTENT INNER -->
				<div class="row">
					<div class="col-md-12">
						<!-- BEGIN PORTLET-->
						<div class="portlet light tasks-widget">
							<div class="portlet-title tabbable-line">
								<div class="caption caption-md">
									<i class="icon-globe theme-font hide"></i>
									<span class="caption-subject theme-font bold uppercase">线路列表</span>
								</div>
							</div>
						
							<div class="portlet-body fix-height" style="padding-top: 0px;">
								<ul class="feeds task-list">
									<li v-for="(link,lid) in links">
										<a href="" @click="toRederect($event,link.linkId,link.linkName)">
											<div class="desc">
												<span class="label label-sm" :class="link.class" v-text="link.status"></span>
												<span class="label label-sm" :class="link.type" v-text="link.statusType"></span>
												{{link.linkName}}
											</div>
										</a>
									</li>						
								</ul>
							</div>
						</div>
						<!-- END PORTLET-->
					</div>
				</div>
				
				<!-- END PAGE CONTENT INNER -->
			</div>
		</div>
		<!-- END PAGE CONTENT -->
	</div>
	<!-- END PAGE CONTAINER -->
</div>
<!-- BEGIN JAVASCRIPTS (Load javascripts at bottom, this will reduce page load time) -->
<!-- BEGIN CORE PLUGINS -->
<script src="assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="assets/layer/layer.js" type="text/javascript"></script>
<script src="assets/js/vue.js"></script>
<script src="assets/js/axios.min.js"></script>
<script src="assets/js/xlsx.full.min.js"></script>
<script src="assets/js/config.js"></script>
<script>
jQuery(document).ready(function() {    
	const {createApp} = Vue;
	const app = createApp({
		data(){
			return {
				links:[],
				t:0
			}
		},
		methods:{
			async load(){
				layer.load(0,{msg:"努力加载中，请稍后..."});
				axios.post(config.getUrl() + "/getLinks",{}).then(res => {
					if(res.status == 200){
						if(res.data.code == 0){
							layer.closeAll()
							if(res.data.data instanceof Array || res.data.data.lenght > 0){
								var list = res.data.data
								if(list instanceof Array && list.length > 0){
									this.links = [];
									for(let i=0;i< list.length;i++){
										let obj = list[i];
										if(obj.status == '正常'){
											obj.class = "label-success"
										}else if(obj.status == '衰减'){
											obj.class = "label-warning"
										}else if(obj.status == "中断"){
											obj.class = "label-danger"
										}else{
											obj.class = ""
										}
										if(obj.statusType == "精准"){
											obj.type = "label-primary"
										}else{
											obj.type = "label-info"
										}
									}
								}
								this.links = res.data.data;
							}
						}else{
							layer.closeAll();
							layer.alert("获取链路失败，代码为：" + res.data.msg,{icon:1,time:3000});
						}
					}else{
						layer.closeAll();
						layer.alert("网络连接失败，请联系管理员",{icon:1,time:3000});
					}
				})
			},
			toRederect(e,linkId,linkName){
				e.preventDefault()
				try {
					axios.post(config.getUrl() + "/hitLine",{linkId,linkName}).then(res => {
						if(res.status == 200){
							if(res.data.code == 0){
								layer.closeAll()
							}else{
								layer.closeAll();
								layer.alert("获取链路失败，代码为：" + res.data.msg,{icon:1,time:3000});
							}
						}else{
							layer.closeAll();
							layer.alert("网络连接失败，请联系管理员",{icon:1,time:3000});
						}
					})
				} catch (error) {
					layer.closeAll();
						layer.alert("网络连接失败，请联系管理员",{icon:1,time:3000});
				}
				
			},
		},
		created(){
			/* this.t = setInterval(()=>{
				this.load()
			},3000) */
			this.load();
		}
	});
	app.mount("#app")
});
</script>
<!-- END JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>